<template>
  <a-modal :width="'45vw'" title="应用门店" @cancel="close" :visible="visible" unmount-on-close>
    <div class="site-sum">门店数量：{{ table?.dataList?.length || '-' }}</div>
    <table-index :table="table" />
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup name="TemplateSiteModal">
  import { ref } from 'vue'
  import { useTable } from '@/hooks/table'

  const visible = ref(false)
  const open = (record, api) => {
    visible.value = true
    // 获取模板门店列表
    const param = {
      id: record.id,
    }
    table.tableLoading = true
    api(param)
      .then((res) => {
        const result = res.result
        table.dataList = result
      })
      .finally(() => {
        table.tableLoading = false
      })
  }
  // table 配置
  const table = useTable({
    pagination: false,
    tableLoading: false,
    scroll: {
      maxHeight: '70vh',
    },
    columns: [
      { title: '门店名称', dataIndex: 'siteName' },
      { title: '车型数量', dataIndex: 'carModelNumber' },
      { title: '车辆数量', dataIndex: 'carNumber' },
    ],
  })
  const close = () => {
    visible.value = false
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .site-sum {
    margin-bottom: 10px;
    font-size: 16px;
  }
</style>
